<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app-7">
			<ol>
	<todo-item v-for="item in groceryList" 
	:todo="item"></todo-item>
			</ol>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('todo-item', {
			template: `<li>{{todo.text}}</li>`,
			props: ['todo'],

		})

		const app = new Vue({
			el: '#app-7',
			data: {
				groceryList: [{
						id: 0,
						text: '蔬菜'
					},
					{
						id: 1,
						text: '奶酪'
					},
					{
						id: 2,
						text: '随便其它什么人吃的东西'
					}
				]
			}
		})
	</script>
</html>
